<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<title></title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/elm.css" />
		<link rel="stylesheet" href="css/swiper.min.css" />
		<script type="text/javascript" src="js/swiper.min.js" ></script>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
	</head>
	<style>
		a:hover{
			
			color: red;
		}
	</style>
	<body>
		
		<header style="background-color: orangered;width: 100%;height: 7.6rem;color: white;">
			<br />
			<ul style="display: flex;justify-content: space-around;">
			<li>东城区北京市政府</li>
			<li>昌平</li>
			
			</ul>
			<br />
			<input type="text" placeholder="搜索商家、商品" style="background: white; border-radius: 5%;margin-left: 2rem;height: 2rem;width: 86%;"/>
			<br />
			<br />
			<span>张良麻辣烫&nbsp;&nbsp;烤肉饭&nbsp;&nbsp;睡过觉&nbsp;&nbsp;肯德基&nbsp;&nbsp;珍珠奶茶&nbsp;&nbsp;千层饼&nbsp;&nbsp;西红柿&nbsp;&nbsp;凹凸曼</span>
		</header>
		     <div class="swiper-container" style=" width: 100%;
      height: 13rem;">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="img/banner.png"/ style=" width: 100%;
      height: 13rem;"></div>
					<div class="swiper-slide"><img src="img/banner.png"/ style=" width: 100%;
      height: 13rem;"></div>
				
					
				</div>
				<div class="swiper-pagination"></div>
			</div>
			
			<section>
				<p style="padding: 1rem;">推荐商家</p>
				<ul style="display: flex;">
				 <li style="margin-left: 1rem;"><img src="img/tu.jpg" width="50px" height="50px"</li>
				 <li style="margin-left: 1rem;">11粥品香坊(回龙观)<br/>
				 	月售90单<br />20元起送/配送费/4/￥69.2/人
				 </li>				 
				</ul>
				<br />
				<ul style="display: flex;">
				 <li style="margin-left: 1rem;"><img src="img/tu.jpg" width="50px" height="50px"</li>
				 <li style="margin-left: 1rem;">11粥品香坊(回龙观)<br/>
				 	月售90单<br />20元起送/配送费/4/￥69.2/人
				 </li>				 
				</ul>
				<br />
				<ul style="display: flex;">
				 <li style="margin-left: 1rem;"><img src="img/tu.jpg" width="50px" height="50px"</li>
				 <li style="margin-left: 1rem;">11粥品香坊(回龙观)<br/>
				 	月售90单<br />20元起送/配送费/4/￥69.2/人
				 </li>				 
				</ul>
				<br />
				<ul style="display: flex;">
				 <li style="margin-left: 1rem;"><img src="img/tu.jpg" width="50px" height="50px"</li>
				 <li style="margin-left: 1rem;">11粥品香坊(回龙观)<br/>
				 	月售90单<br />20元起送/配送费/4/￥69.2/人
				 </li>				 
				</ul>
				<br />
				<ul style="display: flex;">
				 <li style="margin-left: 1rem;"><img src="img/tu.jpg" width="50px" height="50px"</li>
				 <li style="margin-left: 1rem;">11粥品香坊(回龙观)<br/>
				 	月售90单<br />20元起送/配送费/4/￥69.2/人
				 </li>				 
				</ul>
				<br />
				
			</section>
			<footer style="height:3rem;background: yellow;">
				<ul style="line-height: 3rem;display: flex;justify-content: space-around;">
				<li><a>外卖</a></li>
				<li><a>发现</a></li>
				<li><a>订单</a></li>
				<li><a>我的</a></li>
				</ul>
			</footer>
	</body>
	
	<script>
		var myswiper = new Swiper(".swiper-container",{
				autoplay:1000,
	  		    loop:true,
	  		    pagination: '.swiper-pagination',
			})
	</script>
</html>
